<template>
	<div id="app" :class="isMobile? '' : 'web-app'">
		<!-- <MobileTitle v-if="isMobile" />
		<WebTitle v-else />
		<ChatMessage />
		<MobileFooter v-if="isMobile" />
		<WebFooter v-else /> -->
		<!-- <Test /> -->
		<ZcoIMView v-if="zcoIM && agent" />
	</div>
</template>

<script>
// import WebTitle from '@/components/Web/WebTitle.vue';
// import ChatMessage from '@/components/ChatMessage/index.vue';
// import WebFooter from '@/components/Web/WebFooter.vue';
// import MobileTitle from '@/components/Mobile/MobileTitle.vue';
// import MobileFooter from '@/components/Mobile/MobileFooter.vue';
// import Test from '@/components/Test.vue';
import ZcoIM from './index';
import { isMobile } from './utils/util';
import ZcoIMView from './view/ZcoIMView.vue';
ZcoIM.type = 'web'
ZcoIM.width = window.innerWidth;
ZcoIM.height = undefined;
// set option
ZcoIM.setOptions({ hideVideoButton: false, hidePhotoButton: false, hideImageButton: false, hideFileButton: false, showKbButton: true });
ZcoIM.agent = {userName: '1'};
export default {
	name: 'App',
	// eslint-disable-next-line vue/no-unused-components
	components: { /*WebTitle, ChatMessage, WebFooter, MobileTitle, MobileFooter, Test, */ZcoIMView },
	data() {
		return {
			isMobile: isMobile(),
			zcoIM: ZcoIM,
			agent: ZcoIM.agent
		};
	},
	mounted() {
		ZcoIM.onRequestHangup(() => {
			console.warn('request hangup');
		});
		ZcoIM.onRequestAudioCall(() => {
			console.warn('request audio call');
		});
		ZcoIM.onRequestVideoCall(() => {
			console.warn('request video call');
		});
		ZcoIM.onKbButtonClick(ack => {
			console.log('kb button click', ack);
			ZcoIM.sendKbMessage('https://www.baidu.com/');
		});
		// ZcoIM.init(window.innerWidth, undefined, 'mobile', 'im-message', false);
		ZcoIM.setUserInfo({ clientId: '1', id: '1', name: '1', role: '1', userName: '1' });
		ZcoIM.setMobileTitle({ title: '1', type: 'im', members: '3' });

		
	},
	methods: {}
};
</script>

<style>
#app {
	position: fixed;
    top: 0;
    left: 0;
	color: #2c3e50;
	width: 100%;
	height: 100%;
	padding-bottom: constant(safe-area-inset-bottom); /*兼容 IOS<11.2*/
    padding-bottom: env(safe-area-inset-bottom); /*兼容 IOS>11.2*/
    padding-top: constant(safe-area-inset-top); /*兼容 IOS<11.2*/
    padding-top: env(safe-area-inset-top); /*兼容 IOS>11.2*/
}
.web-app {
	width: 340px !important;
	box-shadow: 0 2px 6px 0 rgb(0 0 0 / 12%);
    border-radius: 2px;
}
</style>
